<html>
	<head>
		<meta charset="UTF-8">
		<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
		<style>
			body {
					    margin: 0;
					    height: 100vh;
					    display: flex;
					    align-items: center;
					    justify-content: center;
					    background-color: black;
					}
					.loader {
					    width: 30em;
					    height: 30em;
					    font-size: 10px;
					    position: relative;
					    display: flex;
					    align-items: center;
					    justify-content: center;
					}
					.loader .face {
					    position: absolute;
					    border-radius: 50%;
					    border-style: solid;
					    animation: animate 3s linear infinite;
					}
					.loader .face:nth-child(1) {
					    width: 100%;
					    height: 100%;
					    color: gold;
					    border-color: currentColor transparent transparent currentColor;
					    border-width: 0.2em 0.2em 0em 0em;
					    --deg: -45deg;
					    animation-direction: normal;
					}
					.loader .face:nth-child(2) {
					    width: 70%;
					    height: 70%;
					    color: lime;
					    border-color: currentColor currentColor transparent transparent;
					    border-width: 0.2em 0em 0em 0.2em;
					    --deg: -135deg;
					    animation-direction: reverse;
					}
					.loader .face .circle {
					    position: absolute;
					    width: 50%;
					    height: 0.1em;
					    top: 50%;
					    left: 50%;
					    background-color: transparent;
					    transform: rotate(var(--deg));
					    transform-origin: left;
					}
					.loader .face .circle::before {
					    position: absolute;
					    top: -0.5em;
					    right: -0.5em;
					    content:'';
					    width: 1em;
					    height: 1em;
					    background-color: currentColor;
					    border-radius: 50%;
					    box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
					}
					@keyframes animate {
					    to {
					        transform: rotate(1turn);
					    }
					}
		</style>
	</head>
	<body>
		<div class="loader">
				<div class="face">
					<div class="circle"></div>
				</div>
				<div class="face">
					<div class="circle"></div>
				</div>
			</div>
	</body>
</html>
